// 1 下载swiper  指定版本 5
// 2 创建公共组件并导入css/js
// 3 复制结构、样式 宽度/高度
// 4 组件渲染完毕 实例化

// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import Swiper from "swiper/js/swiper.js"; // 引入js
import "swiper/css/swiper.min.css"; // 引入样式

import "./styled.scss";

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  // 触发机制：组件渲染完毕
  // 语法： mounted 、onMounted、 componentDidMount() {}

  componentDidMount() {
    // 配置swiper播放 配置项都写这里面
    new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
    });
  }

  render() {
    return (
      <>
        <div className="swiper-container">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <img
                src="https://static.maizuo.com/pc/v5/usr/movie/f024f2d0569907c186eb7bb2ce45a83b.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://static.maizuo.com/pc/v5/usr/movie/90f3c143e34ea9c9d29a759885e3d627.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://static.maizuo.com/pc/v5/usr/movie/f024f2d0569907c186eb7bb2ce45a83b.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://static.maizuo.com/pc/v5/usr/movie/59fd3ddac3c29e17916e1fddaba0041b.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://static.maizuo.com/pc/v5/usr/movie/119576cdfadde4fc917523c95b2b1800.jpg"
                alt=""
              />
            </div>
          </div>
          <div className="swiper-pagination"></div>
        </div>
      </>
    );
  }
}
export default Index;
